import React, { Component } from 'react'
import Footer from "./components/footer";
import List from "./components/list";
import Header from "./components/header";
export default class App extends Component {
  state = {
    todoList: [
      {
        id: 0,
        name: "吃饭",
        done: true
      },
      {
        id: 1,
        name: "睡觉",
        done: true
      },
      {
        id: 3,
        name: "逛街",
        done: false
      },
      {
        id: 2,
        name: "写代码",
        done: true
      }
    ]
  }
  addTodo = (e) => {
    const { todoList } = this.state
    let newTodoList = [e, ...todoList]
    this.setState({
      todoList: newTodoList
    })
  }

  updateTodo = (id, done) => {
    const { todoList } = this.state
    let newArr = todoList.map(e => e.id === id ? { ...e, done: done } : e)
    this.setState({
      todoList: newArr
    })
  }

  deleteTodo = (id) => {
    const { todoList } = this.state
    if (window.confirm("确认删除吗？")) {
      let newArr = todoList.filter(e => e.id !== id)
      this.setState({ todoList: newArr })
    }
  }
  checkedAlltodos = (done) => {
    const { todoList } = this.state
    let newArr = todoList.map(e => {
      return { ...e, done }
    })
    this.setState({
      todoList: newArr
    })
  }
  clearAllDone = () => {
    const { todoList } = this.state
    let newArr = todoList.filter(e => !e.done)
    this.setState({ todoList: newArr })
  }
  render() {
    const { todoList } = this.state
    return (
      <div>
        <Header addTodo={this.addTodo} />
        <List todoList={todoList} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
        <Footer todoList={todoList} checkedAlltodos={this.checkedAlltodos} clearAllDone={this.clearAllDone}/>
      </div>
    )
  }
}
